var animationStep=0;
$(document).ready(function() {	
	
	//Put in the DIV id you want to display
	launchWindow('#dialog');
	
	//if close button is clicked
	$('.window #close').click(function () {
		$('#mask').hide();
		$('.window').hide();
	});		
	
	//if mask is clicked
	$('#ContinueButton').click(function () {
		$("#mask").hide();
		$('.window').hide();
	});			
	
	$('#finish').click(function () {
	    $("#Intro_7").remove();
		$("#Intro_8").remove();
		$("#mask").fadeIn("slow");
		$('.window').fadeIn("slow");
		setTimeout(function(){$("#Outro_1").fadeIn("slow")},1000);
		setTimeout(function(){$("#Outro_2").fadeIn("slow")},4000);
		
	});			
	
	

	$(window).resize(function () {
	 
 		var box = $('#boxes .window');
 
        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
      
        //Set height and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});
               
        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        box.css('top',  winH/2 - box.height()/2);
        box.css('left', winW/2 - box.width()/2);
	 
	});	
	
});

function launchWindow(id) {
	
		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
	
		//Set heigth and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});
		
		//transition effect		
		//$('#mask').fadeTo(1,0.8);	
		//$('#mask').fadeIn(200);	
		//$('#mask').fadeTo("slow",0.8);	
	
		//Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();
              
		//Set the popup window to center
		$(id).css('top',  120);
		$(id).css('left', winW/2-300);
		//transition effect
		$(id).fadeIn(10);	
		lanuchIntro();
}

function lanuchIntro(){
		setTimeout(function(){$("#Intro_2").fadeIn("slow")},1000);
		setTimeout(function(){$("#Intro_3").fadeIn("slow")},2300);
		setTimeout(function(){$("#Intro_4").fadeIn("slow")},3300);
		setTimeout(function(){$("#Intro_5").fadeIn("slow")},3300);
		setTimeout(function(){$("#Intro_6").fadeIn("slow")},4300);
		setTimeout(function(){  $("#Intro_6_images").animate({
		    left: -1000,
		  }, 6200 );
		},5300);
		setTimeout(function(){		for (var i=1; i < 7; i++) {
		  $("#Intro_"+i).remove();
		};},11500);
		setTimeout(function(){$("#Intro_7").fadeIn("slow")},11100);
		setTimeout(function(){
			$("#Intro_7_images").animate({
		    	left: -100,
		  	}, 3200,function(){$("#Intro_7_images").fadeOut("slow")});
		},11100);
		setTimeout(function(){$("#Intro_8").fadeIn("slow");$("#ContinueButton").fadeIn("slow");},14300);
		
		
}

